<template>
  <view class="sos" @tap="goSOS" :style="computedStyle">
    <text class="icon">📞</text>
    <text class="txt">SOS</text>
  </view>
</template>

<script>
export default {
  name: 'EmergencySOS',
  props: {
    bottom: { type: Number, default: 140 }, // rpx, above tabbar
    right: { type: Number, default: 20 } // rpx
  },
  computed: {
    computedStyle(){
      return `bottom:${this.bottom}rpx;right:${this.right}rpx;`
    }
  },
  methods: {
    goSOS(){
      uni.navigateTo({ url: '/pages/sos/index' })
    }
  }
}
</script>

<style scoped>
.sos {
  position: fixed;
  width: 104rpx; height: 104rpx;
  background: #ef4444;
  color:#fff;
  border-radius: 999rpx;
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  box-shadow: 0 10rpx 28rpx rgba(239,68,68,.35);
  z-index: 9999;
}
.icon { font-size: 36rpx; line-height: 1; }
.txt { font-size: 22rpx; margin-top: 4rpx; font-weight: 700; }
</style>


